<template>
  <view class="content">
    <view class="user">
      <view class="flex userRow">
        <view class="">
          姓名：<text style="color: #7948EA;" v-if="info.user.username">{{info.user.username}}</text>
        </view>
        <view class="twoBox">
          年级：<text class="c-33">{{info.user.grade}}</text>
        </view>
        <view class="" style="text-align: right;">
          月份：<text class="c-33">{{info.month}}</text>
        </view>
      </view>

      <view class="flex userRow">
        <view class="">
          状态：
          <text style="color: #D43030" v-if="info.state == 0">未通过</text>
          <text class="green" v-if="info.state == 1">通过</text>
        </view>
        <view class="" style="width: 60%;">
          审核日期：<text class="green">{{info.examine_time}}</text>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="item">
        <view class="title">
          训练内容
        </view>
        <view class="itemContent">
          {{info.test_content}}
        </view>
      </view>
      <view class="item">
        <view class="title"
          style=" background: linear-gradient(90deg, rgba(42, 130, 228, 1) 0%, rgba(204, 204, 204, 0) 100%);">
          教练点评
        </view>
        <view class="itemContent">
          {{info.teacher_comment}}
        </view>
      </view>
      <view class="item">
        <view class="title"
          style=" background: linear-gradient(90deg, rgba(0, 186, 173, 1) 0%, rgba(204, 204, 204, 0) 100%);">
          本月数据
        </view>
        <view class="itemContent">
          {{info.month_data}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        info: {}
      };
    },
    onLoad(option) {
      this.getFeedbackMonthDetail(option)
    },
    methods: {
      async getFeedbackMonthDetail(obj) {
        const {
          data: res
        } = await uni.$http.post('school/feedback/getFeedbackMonthDetail', obj)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.info = res.data
        console.log(this.info);
      }
    }
  }
</script>

<style lang="scss">
  .content {
    padding-top: 20rpx;

    .user {
      width: 673rpx;
      margin: 0 auto;
      font-size: 21rpx;
      color: #999;
      padding: 0 25rpx;
      margin-bottom: 30rpx;

      .green {
        color: #00BAAD;
      }

      .userRow {
        margin-bottom: 20rpx;

        >view {
          width: 33%;
        }

        .twoBox {
          text-align: left;
        }
      }
    }

    .list {
      width: 673rpx;
      margin: 0 auto;

      .item {
        font-size: 21rpx;
        margin-bottom: 15rpx;

        .title {
          width: 673rpx;
          height: 39rpx;
          line-height: 39rpx;
          opacity: 1;
          border-radius: 8.76rpx;
          padding-left: 25rpx;
          color: #fff;
          background: linear-gradient(90deg, rgba(172, 51, 193, 1) 0%, rgba(204, 204, 204, 0) 100%);
        }

        .itemContent {
          margin-top: 30rpx;
          padding: 0 25rpx;
          color: #333;
        }
      }
    }
  }
</style>